<template>
	<view>
		<view style="background: #3464D6;display: inline-block;width: 100%;" v-if="role==2 || role ==3">

			<view class="u-padding-30 " style="color: #fff;" >
				<view @click="show = true" class="u-flex u-row-between u-padding-15 u-margin-bottom-20 "
					style="border: 3rpx solid #fff; width: 700rpx;margin: auto;border-radius:10rpx;margin-top: 10rpx;">
					<view>
						{{date}}
					</view>
					<view>
						<u-icon name="calendar-fill" color="#fff" size="40"></u-icon>
					</view>
				</view>
                <view class="u-margin-bottom-10">
					 <u-section title="订单总数" color="#fff" subColor="#fff" @click="allbook">
					 	<view slot="right" style="font-size: 30rpx;">{{orderNum}}
					 		<u-icon name="arrow-right"></u-icon>
					 	</view>
					 </u-section>
				 </view>
             <!--   <view class="u-margin-bottom-10">
					<u-section title="营业额" color="#fff" subColor="#fff" :arrow="false">
					
						<view slot="right" style="font-size: 30rpx;">￥{{expenseMoney}}</view>
					</u-section>
                </view>
				 -->
				<view class="u-margin-bottom-10">
					<u-section title="收益额" color="#fff" subColor="#fff" :arrow="false">
						<view slot="right" style="font-size: 30rpx;">￥{{earningsMoney}}</view>
					</u-section>
				</view>
				
               <view class="u-margin-bottom-10">
					<u-section title="充值金额" color="#fff" subColor="#fff" :arrow="false">
						<view slot="right" style="font-size: 30rpx;">￥{{rechargeMoney}}</view>
					</u-section>
				</view>
				

			</view>



		</view>
		<u-tabs :list="nav" :is-scroll="false" :current="current" @change="change" v-if="type==1"></u-tabs>
		<u-gap height="10" bg-color="#f1f1f1"></u-gap>
		<view v-if="!current">
			<view v-for="(item,index) in list" :key="index" class="bg">
				<view class="u-flex u-row-between " style="align-items: center ; margin-bottom: 20rpx;">
					<view style="font-weight: bold;font-size: 28rpx;">{{item.carportName}}</view>
					<view style="color: #FA3534;font-weight: bold;">
						{{item.status==0?'空闲':item.status==1?'暂用':item.status==2?'暂用':''}}
					</view>
				</view>
				<view class="u-flex u-row-between">
					<view>
						<u-button size="mini" type="primary" :custom-style="{marginRight:'20rpx'}"
							@click="controls(3,item)">开门</u-button>
						<u-button size="mini" type="info" :custom-style="{background:'#343436',color:'#fff'}"
							@click="controls(4,item)">关门</u-button>
					</view>
					<view>
						<u-button size="mini" type="success" :custom-style="{marginRight:'20rpx'}"
							@click="controls(1,item)">开水电</u-button>
						<u-button size="mini" type="warning" @click="controls(2,item)">关水电</u-button>
					</view>
				</view>
			</view>
		</view>


		<view v-if="current">
			<!-- <u-gap height="10" bg-color="#f1f1f1"></u-gap>
			<view class="u-flex u-row-around  u-padding-20">
				<view class="numbg">
					<view style="color: #0064C6;margin-bottom: 20rpx;font-size: 40rpx">
						{{orderNum}}单
					</view>
					<view>
						订单总数
					</view>
				</view>
				<view class="numbg">
					<view style="color: #FFA200;margin-bottom: 20rpx;font-size: 40rpx;">
						{{ingNum}}单
					</view>
					<view>
						进行订单
					</view>
				</view>
			</view> -->

			<view>
				<view class="u-padding-30 u-border-bottom">
					<u-section title="进行中订单" :right="false" color="#0064C6" line-color="#0064C6"></u-section>
				</view>

				<List :list="list" @end="end"></List>

			</view>

		</view>

		<u-loadmore :status="initial.status" />
		<u-toast ref="uToast" />
		<u-calendar v-model="show" mode="range" @change="changeDate"></u-calendar>
	</view>



</template>

<script>
	import loader from '@/common/loadPage.js';

	import List from './components/carList.vue';
	export default {
		components: {
			List
		},
		mixins: [loader],
		data() {
			return {
				nav: [{
					name: '车位'
				}, {
					name: '订单'
				}],
				current: 0,
				list: [],
				initial: {
					page: 1,
					geturl: "",
					parm: {
						store_id: '',
						status: 1,

					},
					isPage: true
				},
				type: '',
				rechargeMoney: '',
				expenseMoney: '',
				earningsMoney:"",
				orderNum: '',
				date: '时间筛选',
				show: false,
				role:''
			}
		},
		methods: {
			
			
			
			infomation(){
				 return new Promise((resolve, reject) => {
					 this.$u.api.userInfo().then(res => {
					 	this.role = res.role;
						resolve(res)
					 }).catch(err => {
					 			
					 })
				 })
			},
			
			
			
			allbook() {
				uni.navigateTo({
					url: './allBook?id=' + this.initial.parm.store_id
				})
			},

			end(item) {

				this.$u.post('/api/alliance/finish', {
					order_id: item.id
				}).then(res => {
					this.$refs.uToast.show({
						title: '订单结束成功',
						type: 'success',
						callback: () => {
							this.initial.page = 1;
							this.getGoods()
						}
					})
				}).catch(err => {

				})
			},
			change(index) {
				this.current = index;
				this.initial.page = 1;
				console.log(index)
				if (!index) {
					this.initial.geturl = '/api/index/carport'
				} else {

					this.initial.geturl = '/api/alliance/orderList'
				}
				this.getGoods()
			},
			controls(e, item) {
				uni.showModal({
					title: "温馨提示",
					content: e == 3 ? '是否开门' : e == 4 ? '是否关门' : e == 1 ? '是否打开水电' : e == 2 ? '是否关闭水电' : '',
					success: (res) => {
						if (res.confirm) {
							this.$u.post('/api/alliance/client', {
								carport_id: item.id,
								cmd: e
							}).then(res => {
								this.$refs.uToast.show({
									title: e == 3 ? '开门成功' : e == 4 ? '关门成功' : e == 1 ?
										'水电打开' : e == 2 ? '水电关闭' : '',
									type: 'success',
								})
							}).catch(err => {

							})
						}
					}
				})
			},
			orderStatistics(date) {
				if(this.role==0 || this.role==1)return;
				this.$u.post('/api/alliance/orderStatistics', {
					store_id: this.initial.parm.store_id,
					date: date?date:''
				}).then(res => {
					var {
						orderNum,
						rechargeMoney,
						expenseMoney,
						earningsMoney
					} = res;
					this.rechargeMoney = JSON.stringify(rechargeMoney);
					this.expenseMoney = JSON.stringify(expenseMoney);
					this.orderNum = orderNum
					this.earningsMoney = earningsMoney
					
					
				}).catch(err => {

				})
		
			},
			changeDate(e) {
				var {
					endDate,
					startDate
				} = e;
				const date = startDate + ' '+ '-' +  ' '+ endDate
				this.date=date;
				this.orderStatistics(date)
			},
			

		},
		onLoad(options) {
			if (options.id) {
				this.initial.parm.store_id = options.id;
				this.type = options.iscar;
				if (options.iscar == 2) {
					this.current = 1;
					this.initial.geturl = '/api/alliance/orderList'
				} else {
					this.initial.geturl = '/api/index/carport'
				}
			}

			this.getGoods()
		},
		async onShow() {
		    await this.infomation()
			this.orderStatistics()
			
		},




	}
</script>

<style lang="scss">
	.bg {
		background: #E5EFF9;
		width: 700rpx;
		padding: 30rpx;
		border-radius: 10rpx;
		margin: 20rpx auto;
	}

	.numbg {
		width: 334rpx;
		height: 176rpx;
		background: #E5EFF9;
		text-align: center;
		padding: 40rpx 0;
	}
</style>
